<template>
  <div id="father">
    <div class="son" style="backgroundColor:rgb(200, 200, 255)" v-for="(item, index) in 6" :key="(index+1)*200">
      <Strong style="color:black">申请出题</Strong>
      <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
      <div id="msg">
        <div id="name">
          <span><b>张XX</b></span
          ><i class="el-icon-male" style="color: blue"></i>
        </div>
        <div id="myclass">班级：2020级软件工程三班</div>
        <div id="fensi">粉丝：20</div>
        <div id="wenzhang">文章：10</div>
      </div>
      <div id="guanzhu">
        <a href="javascript:;" @click="look">查看申请</a>
      </div>
    </div>
    <div class="son" v-for="(item, index) in 6" :key="(index+1)*10">
      <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
      <div id="msg">
        <div id="name">
          <span><b>张XX</b></span
          ><i class="el-icon-male" style="color: blue"></i>
        </div>
        <div id="myclass">班级：2020级软件工程三班</div>
        <div id="fensi">粉丝：20</div>
        <div id="wenzhang">文章：10</div>
      </div>
      <div id="guanzhu">
        <span>关注了你</span>
        <a href="javascript:;">查看主页</a>
        <a href="javascript:;">回关</a>
      </div>
    </div>

    <el-dialog
      title="申请出题"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      课程名：<el-input v-model="dialog.subject" :disabled="true"></el-input>
      知识点标签：<el-input v-model="dialog.tag" :disabled="true" ></el-input>
      题目内容：<el-input v-model="dialog.text" :disabled="true"></el-input>
      标准答案：<el-input v-model="dialog.answer" :disabled="true"></el-input>
      题目解析：<el-input v-model="dialog.anylase" :disabled="true"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noconfimedit">打 回 申 请</el-button>
        <el-button type="primary" @click="confirmedit">通 过 申 请</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      squareUrl:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      centerDialogVisible:false,
      dialog:{
        subject:1231231,
        tag:1212,
        text:'1212',
        answer:'1212',
        anylase:'5678'
      }
    };
  },
  methods: {
    look(){
      this.centerDialogVisible=true;
    },
    noconfimedit(){
      this.centerDialogVisible=false;
this.$message({
            type: 'error',
            message: '审批已打回'
          });
    },
    confirmedit() {
        this.centerDialogVisible=false;
        this.$message({
            type: 'success',
            message: '审批已通过'
          });
      }
  },
};
</script>


<style lang="less">
.son {
  margin: 0px 0px 10px;
  border: 1px solid black;
  border-radius: 10px;
  width: 80%;
  height: 100px;
  color: rgb(0, 195, 255);
  background-color: rgba(122, 195, 255, 0.2);
  display: flex;
  align-items: center;
  &:hover {
    box-shadow: 1px 1px 8px 1px gray;
  }
  .el-avatar {
    flex: 1;
    margin: 10px;
  }
  #msg {
    margin: 10px;
    flex: 6;
  }
  #guanzhu {
    flex: 3;
    span {
      color: red;
    }
    a {
      margin: 5px;
    }
  }
}
</style>
